<template>
	<view class="outer_box">
		<view class="tip" v-if="userInfo.userInfo.flag==3">
			为保证您的会员权益，请您按时完成会员固定充值，还剩{{day}}天
		</view>
		<view class="tip" v-if="userInfo.userInfo.flag==2">
			由于您未按时充值，会员权益已失效，完成会员充值可重新激活
		</view>
		<view class="card-box" >
			<view class="member-box" :class="userInfo.userInfo.flag==3?'':'lose-member'">
				<!-- 第一行 -->
				<view class="personnel-box">
					<view class="personnel">
						<view class="">{{userInfo.userInfo.nickName}}</view>
						<view class="">{{userInfo.userInfo.phone}}</view>
					</view>
					<view class="personnel-manage">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/jrgl.png" @tap='openFamily' mode=""></image>
					</view>
				</view>
				<!-- 第二行 -->
				<view class="money-box">
					<view class="money">
						<view class="">余额(元)</view>
						<view class="">{{userInfo.userInfo.money}}</view>
					</view>
					<view class="toUp-box" @tap='openToUp'>
						<view>
							充值
						</view>
					</view>
				</view>



			</view>
		</view>
		<!-- 消费记录 -->
		<view class="consumption-box">
			<view class="consumption-card">
				<view class="consumption-title" :class="activate==0?'activate-title':''">
					<view class="" @tap="changeActive(0)">消费明细</view>
				</view>
				<view class="toUp-title" :class="activate==1?'activate-title':''">
					<view class="" @tap="changeActive(1)">充值记录</view>
				</view>

			</view>
			<view v-if="activate==0" class="consumption-recode" v-for="(item,index) in spentdetail">
				<view class="consumption-recode-v">
					<view class="product-title">
						<view class="">{{item.type==1?'退款':'付款'}}-{{item.describe}}</view>
						<view class="">{{item.createTime}}</view>
					</view>
					<view class="product-price">
						<view class="">{{item.type==2?'-':''}}{{item.money.toFixed(2)}}</view>
					</view>
				</view>
			</view>
			<view v-if="activate==1" class="consumption-recode" v-for="(item,index) in spentrecord">
				<view class="consumption-recode-v">
					<view class="product-title">
						<view class="">会员充值</view>
						<view class="">{{item.createTime}}</view>
					</view>
					<view class="product-price">
						<view class="">+{{item.money.toFixed(2)}}</view>
						<view class="">充值成功</view>
					</view>
				</view>
			
			</view>

		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				activate: 0,
				member:true, //会员激活状态 true是会员 false 非会员
				spentdetail:'',
				spentrecord:'',
				isshow:false,
				day:''
			}
		},
		onShow() {
			this.getUserInfo()
			this.walletrecorddetail()
			this.rechargerecord()
			this.day = this.setTime(this.userInfo.userInfo.expirationTime)
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			setTime(time) { 
				var now = parseInt(new Date().getTime()/1000);
				var diffValue = time - now;
				var data = parseInt(diffValue  / 60 / 60 / 24);
				return data
			 },
			//获取消费明细
			walletrecorddetail(){
				this.$api_http.walletrecorddetail({}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data)
						this.spentdetail = res.data.dataMap.list
						this.isshow = this.spentdetail.length==0?true:false
					}
				})
			},
			rechargerecord(){
				this.$api_http.rechargerecord({}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data)
						this.spentrecord = res.data.dataMap.list
					}
				})
			},
			openToUp(){
				uni.navigateTo({
					url:'./toUp'
				})
			},
			openFamily(){
				uni.navigateTo({
					url:'family'
				})
			},
			changeActive(value) {
				this.activate = value

			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.outer_box {
		display: flex;
		flex-direction: column;


		.consumption-box {
			padding: 0 30rpx;
			margin: 30rpx 0;

			.consumption-recode {
				width: 100%;
				background-color: #fff;
				border-top: solid 2rpx #f8f8f8;

				.consumption-recode-v {
					display: flex;
					padding: 20rpx;
					align-items: center;

					.product-price {
						view:nth-child(1) {
							font-size: 28rpx;
							font-weight: bold;
							color: #FF8308;
						}
						view:nth-child(2) {
							color: #999999;
							font-size: 24rpx;
							margin-top: 10rpx;
						
						
						}
					}
					.no-record {
						padding-top: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
					
						view:nth-child(2) {
							margin: 0 auto;
							font-size: 20rpx;
							font-weight: 400;
							color: #999999;
						}
					
						image:nth-child(1) {
							margin: 0 auto;
							width: 324rpx;
							height: 313rpx;
						}
					}
					.product-title {
						flex: 1;

						view:nth-child(1) {
							color: #333;
							font-size: 28rpx;
							font-weight: bold;
						}

						view:nth-child(2) {
							color: #999999;
							font-size: 24rpx;
							margin-top: 10rpx;


						}
					}

					.product-price {
						flex: 1;
						text-align: end;
					}
				}
			}

			.consumption-card {
				position: -webkit-sticky;
				position: sticky;
				top: -3rpx;
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 0px 0px #EEEEEE;
				border-radius: 12rpx 12rpx 0px 0px;
				display: flex;

				.toUp-title {}

				.activate-title {
					view {
						border-bottom: 4rpx solid #FF8308;
						color: #FF8308;
					}
				}

				.consumption-title,
				.toUp-title {
					flex: 1;
					display: flex;
					justify-content: center;

					view {
						width: 50%;
						height: 96%;
						line-height: 90rpx;
						font-size: 32rpx;
						text-align: center;
					}

				}
			}
		}

		.card-box {
			padding: 0 30rpx;
			margin: 30rpx 0;
			.lose-member{
				background: rgba(0, 0, 0, 0.65) !important;
				color: #fff !important;
			}

			.member-box {
				background-image: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/member/kapian.png);
				width: 100%;
				height: 320rpx;
				background-size: 100%;
				display: flex;
				flex-direction: column;
				border-radius: 10rpx;
				color: #F8D6A8;

				.money-box {
					// color: #F8D6A8;
					padding: 20rpx 30rpx 0rpx 30rpx;
					font-size: 36rpx;
					display: flex;

					.toUp-box {
						flex: 1;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						view {
							width: 160rpx;
							height: 60rpx;
							background: #FFFFFF;
							border-radius: 30rpx;
							color: #FF8308;
							font-size: 32rpx;
							text-align: center;
							line-height: 60rpx;
						}
					}

					.money {
						flex: 1;

						view:nth-child(1) {
							font-size: 24rpx;
						}

						view:nth-child(2) {
							margin-top: 10rpx;
							font-size: 48rpx;
						}

					}
				}

				.personnel-box {
					// color: #F8D6A8;
					padding: 30rpx;
					font-size: 36rpx;
					display: flex;

					.personnel-manage {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						flex: 1;

						image {
							height: 60rpx;
							width: 200rpx;
						}
					}

					.personnel {
						flex: 1;

						view:first-child {
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}

		.tip {
			width: 100%;
			height: 60rpx;
			background: #FFF4D8;
			color: #FF8308;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 60rpx;
			text-align: center;

		}
	}
</style>
